import React, { type FC } from "react";
import knowledgeService, { type KnowledgeItem } from "@/api/services/knowledge";
import {
	EyeOutlined,
	LikeOutlined,
	PlusOutlined,
	SearchOutlined,
} from "@ant-design/icons";
import {
	Button,
	Card,
	Col,
	Input,
	List,
	Row,
	Space,
	Tag,
	Typography,
	message,
} from "antd";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

import dayjs from "dayjs";

const { Search } = Input;

const KnowledgePage = () => {
	const navigate = useNavigate();
	const [loading, setLoading] = useState(false);
	const [keyword, setKeyword] = useState("");
	const [list, setList] = useState<KnowledgeItem[]>([]);
	const [total, setTotal] = useState(0);
	const [current, setCurrent] = useState(1);
	const [pageSize, setPageSize] = useState(12);

	// 使用真实API获取数据
	const fetchList = async (page = current) => {
		try {
			setLoading(true);
			const res = await knowledgeService.getKnowledgeList({
				page,
				pageSize,
				keyword,
			});
			setList(res.items);
			setTotal(res.total);
		} catch (error) {
			message.error("获取知识列表失败");
		} finally {
			setLoading(false);
		}
	};

	useEffect(() => {
		if (keyword) {
			setCurrent(1);
		}
		fetchList(1);
	}, [keyword]);

	const handleSearch = (value: string) => {
		setKeyword(value);
	};

	const handleItemClick = (item: KnowledgeItem) => {
		if (item.url) {
			// 如果是外部链接，则在新窗口打开
			window.open(item.url, "_blank");
		}
	};

	const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
		<Space>
			{React.createElement(icon)}
			{text}
		</Space>
	);

	return (
		<div style={{ padding: "24px" }}>
			<Row gutter={[24, 24]}>
				<Col span={24}>
					<div style={{ marginBottom: 16 }}>
						<Search
							placeholder="请输入关键词搜索"
							allowClear
							enterButton
							style={{ width: 300 }}
							onSearch={handleSearch}
						/>
					</div>
					<List
						dataSource={list}
						loading={loading}
						pagination={{
							onChange: fetchList,
							total,
							current,
							pageSize,
							showSizeChanger: false,
						}}
						renderItem={(item) => (
							<List.Item>
								<Card
									hoverable
									onClick={() => handleItemClick(item)}
									style={{ width: "100%" }}
								>
									<Row gutter={24} align="middle">
										{item.icon && (
											<Col xs={24} sm={6}>
												<img
													alt={item.title}
													src={item.icon}
													style={{
														width: "100%",
														height: 100,
														objectFit: "cover",
														borderRadius: 4,
													}}
												/>
											</Col>
										)}
										<Col xs={24} sm={item.icon ? 18 : 24}>
											<Space
												direction="vertical"
												size={8}
												style={{ width: "100%" }}
											>
												<Typography.Title level={5} style={{ margin: 0 }}>
													{item.title}
												</Typography.Title>
												<Typography.Paragraph
													ellipsis={{ rows: 2 }}
													style={{ margin: 0, color: "#666" }}
												>
													{item.description}
												</Typography.Paragraph>
												<Space size={16}>
													<IconText
														icon={EyeOutlined}
														text={item.view?.toString() || "0"}
													/>

													<span style={{ color: "#8c8c8c", fontSize: "12px" }}>
														{dayjs(item.createTime).format("YYYY-MM-DD")}
													</span>
													<Space size={4}>
														{item.tags?.map((tag) => (
															<Tag key={tag} color="blue">
																{tag}
															</Tag>
														))}
													</Space>
												</Space>
											</Space>
										</Col>
									</Row>
								</Card>
							</List.Item>
						)}
					/>
				</Col>
			</Row>
		</div>
	);
};

export default KnowledgePage;
